<template>
    <div class='list'>
        <div class="item" v-for="goods in goodsList" :key="goods.id">
            <div class="item-l">
                <img class="item-img" :src="goods.src" alt="">
                </div>
                <div class="item-r">
                    <div class="item-title">{{goods.title}}</div>
                    <div class="item-price">{{goods.price|currency}}</div>
                    <div class="item-opt">
                        <button @click='add(goods)'>加入购物车</button>
                    </div>    
                </div>
        </div>
    </div>
</template>
<script>
// vuex store 与组件如何关联?
import {mapState,mapActions} from 'vuex'
export default{
    methods:{
        ...mapActions('shopcart',['add'])
    },
    computed:{
        ...mapState({
            goodsList:state=>state.goodslist.list,
        })
    },
    created(){
        this.$store.dispatch('goodslist/getList')
    },
    filters:{
        currency(value){
            return '￥ '+value;
        }
    }
}
</script>
<style scoped>
  .item{
      display: flex;
      border-bottom: 1px dashed blueviolet;
  }
  .item-l{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .item-r{
      flex: 1;
  }
  .item-title{
      margin-top: 20px;
  }
  .item-price{
      margin-top: 10px;
      color: red;
      font-weight: 800;
  }
  .item-opt{
      margin-top: 10px;
  }
  .item-opt>button{
      background-color: red;
      color: white;
      border: 0;
  }
</style>